<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/montage-serialization">{
        "section": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "section"}
            }
        },

        "foo": {
            "prototype": "montage/ui/component",
            "values": {
                "element": {"#": "foo"},
                "hasTemplate": false
            }
        },

        "leftSide": {
            "prototype": "montage/ui/component",
            "values": {
                "element": {"#": "leftSide"},
                "hasTemplate": false
            }
        },

        "rightSide": {
            "prototype": "montage/ui/component",
            "values": {
                "element": {"#": "rightSide"},
                "hasTemplate": false,
                "value": {"<-": "@leftSide.value"}
            }
        },

        "templateProperties": {
            "prototype": "montage/ui/component",
            "values": {
                "element": {"#": "template-properties"}
            }
        },

        "iterationItem": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "iterationItem"},
                "value": {"<-": "@templateProperties:cell"}
            }
        }
    }</script>
</head>
<body>
    <div data-montage-id="list">
        <h2>Section</h2>
        <h3>Paragraph</h3>
    </div>

    <div data-montage-id="element-id-collision">
        <h2 data-montage-id="repetition">Section</h2>
        <h3>Paragraph</h3>
    </div>

    <div data-montage-id="multiple-elements-leftSide">
        <h2>Left Side</h2>
    </div>
    <div data-montage-id="multiple-elements-rightSide">
        <h2>Right Side</h2>
    </div>

    <div data-montage-id="multiple-elements-colliding-leftSide">
        <h2 data-montage-id="leftSide">Left Side</h2>
    </div>
    <div data-montage-id="multiple-elements-colliding-rightSide">
        <h2 data-montage-id="rightSide">Right Side</h2>
    </div>

    <div data-montage-id="objects-no-collision">
        <h2 data-montage-id="section">Section</h2>
        <h3>Paragraph</h3>
    </div>

    <div data-montage-id="objects-collision">
        <h2 data-montage-id="foo">Section</h2>
        <h3>Paragraph</h3>
    </div>

    <div data-montage-id="multiple-objects-leftSide">
        <h2 data-montage-id="leftSide">Left Side</h2>
    </div>
    <div data-montage-id="multiple-objects-rightSide">
        <h2 data-montage-id="rightSide">Right Side</h2>
    </div>

    <div data-montage-id="template-properties">
        <h2 data-montage-id="iterationItem"></h2>
    </div>
</body>
</html>
